<template>
  <el-dialog
    title="我的图片收藏夹"
    :visible.sync="thisPageComponent"
    :before-close="handleClose"
    :modal-append-to-body='false'
     append-to-body
  >
    <template>
      <el-form
        ref="addForm"
        :model="addForm"
        label-width="135px"
        style="height: auto"
      >
        <template>
          <el-form-item label="图片描述">
            <el-input
              v-model="addForm.remark"
              style="width: 30%"
              placeholder="请输入图片描述"
            ></el-input>
            <el-button
              type="primary"
              @click="searchImageList()"
              style="margin-left: 20px"
              >查询</el-button
            >
            <el-button type="primary" @click="reset()" style="margin-left: 20px"
              >重置</el-button
            >
          </el-form-item>
        </template>
        <!-- 保存 -->
      </el-form>
    </template>
    <template>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed label="图片" width="200px">
          <template slot-scope="scope">
            <el-popover placement="top-start" title="" trigger="hover">
              <img
                :src="scope.row.imageUrl"
                alt=""
                style="width: 360px; height: 360px"
              />
              <img
                slot="reference"
                :src="scope.row.imageUrl"
                style="width: 30px; height: 30px"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column fixed prop="remark" label="图片描述">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="selectRow(scope.row)">
              <el-tag type="primary" disable-transitions>选择</el-tag>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import { findAllListByPage,useImage } from "@api/sysImageFavorite/sysImageFavorite";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      thisPageComponent: false,
      updateId: this.uId,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      addForm: {
        remark: "",
      },
      tableData: [],
    };
  },
  /**双向绑定 start */
  props: ["choiseMainComponent", "choiseThumbComponent"],
  watch: {
    choiseMainComponent(val) {
      this.thisPageComponent = val;
      this.fetchData();
    },
    choiseThumbComponent(val) {
      this.thisPageComponent = val;
      this.fetchData();
    },
  },
  /**双向绑定 end */
  methods: {
    ...mapActions("d2admin/page", ["close"]),
    onSubmit(formName) {},
    handleClose(done) {
      this.closeWindow();
      done();
    },
    fetchData() {
      this.loading = true;
      findAllListByPage({
        remark: this.addForm.remark,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      })
        .then((res) => {
          this.tableData = res.data.content;
          this.total = res.data.total;
          this.loading = false;
        })
        .catch((err) => {
          console.log("err", err);
          this.loading = false;
        });
    },
    closeWindow() {
      this.thisPageComponent = !this.thisPageComponent;
      this.$emit("close-choose-image-page", this.thisPageComponent);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    searchImageList() {
      this.currentPage = 1;
      this.fetchData();
    },
    reset() {
      this.addForm.remark = "";
      this.fetchData();
    },
    selectRow(row) {
      this.$emit("choosed-image", row);
      useImage({id:row.id}).then((res)=>{}).catch((err)=>{});
      this.closeWindow();
    },
  },
  created() {},
  mounted() {
    this.fetchData();
  },
  computed: {},
};
</script>